<template>
	<div class="app-container">
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button v-hasPermi="['mall:category:add']" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增 </el-button>
			</el-col>

			<right-toolbar :show-search.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table stripe :data="categoryList" style="width: 100%">
			<el-table-column :formatter="emptyToString" type="index" label="编号" align="center" prop="number" />

			<el-table-column :formatter="emptyToString" label="类型" align="center" prop="type">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.type | categoryType }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column :formatter="emptyToString" label="名称" align="center" prop="name"></el-table-column>

			<el-table-column :formatter="emptyToString" label="ICON" align="center" prop="iconLink">
				<template slot-scope="scope">
					<img width="80" :src="scope.row.iconUrl" />
				</template>
			</el-table-column>

			<el-table-column :formatter="emptyToString" label="状态" align="center" prop="status">
				<template slot-scope="scope">
					<el-switch v-model.trim="scope.row.status" @change="handleStatusChange(scope.row)"> </el-switch>
				</template>
			</el-table-column>

			<el-table-column :formatter="emptyToString" label="显示顺序" align="center" prop="sort" />
			<el-table-column :formatter="emptyToString" label="创建时间" align="center" prop="createTime" />

			<el-table-column :formatter="emptyToString" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-hasPermi="['mall:category:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑 </el-button>
					<el-button v-hasPermi="['mall:category:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除 </el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- 添加或编辑类目对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="类型：" prop="name">
					<el-select v-model.trim="form.type">
						<el-option v-for="item in categoryType" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="名称：" prop="name">
					<el-input v-model.trim="form.name" placeholder="请输入名称" />
				</el-form-item>
				<el-form-item label="ICON：">
					<el-upload :headers="headers" class="avatar-uploader" action="http://gyxshop.com/gyxShop/common/uploadV2" :show-file-list="false" :on-success="handleIconUrl">
						<img v-if="form.iconUrl" :src="form.iconUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="显示顺序：">
					<el-input v-model.trim="form.sort" placeholder="请输入显示顺序" />
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">保 存</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listIntegralCategory, getIntegralCategory, delIntegralCategory, addIntegralCategory, updateIntegralCategory, exportIntegralCategory } from '@/api/mall/integralCategory';
import { getToken } from '@/utils/auth';

let category = [];
export default {
	name: 'IntegralCategory',
	components: {},
	filters: {
		categoryType(val) {
			return category.find((item) => {
				return item.dictValue == val;
			}).dictLabel;
		},
	},
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 类目表格数据
			categoryList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				keywords: null,
				desc: null,
				pid: null,
				iconUrl: null,
				picUrl: null,
				level: null,
				sortOrder: null,
				type: null,
				iconLink: null,
				sort: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				name: [{ required: true, message: '类目名称不能为空', trigger: 'blur' }],
			},
			categoryType: [],
		};
	},
	computed: {
		headers() {
			return {
				Authorization: 'Bearer ' + getToken(),
			};
		},
	},
	created() {
		this.getList();
		this.getDicts('mall_integral_category_type').then((response) => {
			this.categoryType = response.data;
			category = response.data;
		});
	},
	methods: {
		/** 搜索类目列表 */
		getList() {
			this.loading = true;
			listIntegralCategory(this.queryParams).then((response) => {
				this.categoryList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				keywords: null,
				desc: null,
				pid: null,
				iconUrl: null,
				picUrl: null,
				level: null,
				sortOrder: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加分类';
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			getIntegralCategory(id).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '编辑分类';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id != null) {
						updateIntegralCategory(this.form).then((response) => {
							this.msgSuccess('编辑成功');
							this.open = false;
							this.getList();
						});
					} else {
						addIntegralCategory(this.form).then((response) => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除类目编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delIntegralCategory(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有类目数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportIntegralCategory(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
		handleIconUrl(res, file) {
			this.form.iconUrl = res.url;
		},
		handlePicUrl(res, file) {
			this.form.picUrl = res.url;
		},
		handleStatusChange(row) {
			updateIntegralCategory(row)
				.then((response) => {
					this.$message.success(row.status ? '上架成功' : '下架成功');
				})
				.catch((err) => {
					row.status = !row.status;
				});
		},
	},
};
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 130px;
	height: 130px;
	line-height: 130px;
	text-align: center;
}

.avatar {
	width: 130px;
	height: 130px;
	display: block;
}
</style>
